<template>
	<view class="history-content">
		<!-- scroll-view 包裹内容，支持下拉刷新和上拉加载 -->
		<scroll-view scroll-y style="height: 100vh" refresher-enabled :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh" @scrolltolower="loadMore">
			<uni-card v-for="(item, index) in historyList" :key="index" :is-shadow="false">
				<view class="item">
					<text class="label">操作内容：</text>
					<text class="value">{{ item.content }}</text>
				</view>
				<view class="item">
					<text class="label">操作详情：</text>
					<text class="value">{{ item.detail }}</text>
				</view>
				<view class="item">
					<text class="label">操作模式：</text>
					<text class="value">{{ item.mode }}</text>
				</view>
				<view class="item">
					<text class="label">操作时间：</text>
					<text class="value">{{ item.time }}</text>
				</view>
				<view class="item">
					<text class="label">操作人：</text>
					<text class="value">{{ item.operator }}</text>
				</view>
			</uni-card>

			<!-- 底部提示 -->
			<view class="load-tip">
				<text v-if="loadingMore">正在加载更多...</text>
				<text v-else>已经到底啦</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const historyList = ref([])
	const refreshing = ref(false)
	const loadingMore = ref(false)
	let page = 1

	// 模拟接口请求
	function fetchHistory(pageNo) {
		return new Promise(resolve => {
			setTimeout(() => {
				const data = [{
						content: `设备[空调${pageNo}]操作反馈`,
						detail: `模拟数据第${pageNo}页，电源开启设置成功，模式设置成功，温度设置成功，风速设置成功`,
						mode: '自动',
						time: `2025-11-19 19:${50 + pageNo}:29`,
						operator: '系统管理员'
					},
					{
						content: `设备[灌溉泵${pageNo}]操作反馈`,
						detail: `模拟数据第${pageNo}页，泵启动成功，水流正常，压力正常`,
						mode: '手动',
						time: `2025-11-19 18:${20 + pageNo}:15`,
						operator: '李四'
					},
					{
						content: `设备[温室灯光${pageNo}]操作反馈`,
						detail: `模拟数据第${pageNo}页，灯光开启成功，亮度设置为80%`,
						mode: '自动',
						time: `2025-11-19 17:${5 + pageNo}:42`,
						operator: '王五'
					},
					{
						content: `设备[温室灯光${pageNo}]操作反馈`,
						detail: `模拟数据第${pageNo}页，灯光开启成功，亮度设置为80%`,
						mode: '自动',
						time: `2025-11-19 17:${5 + pageNo}:42`,
						operator: '王五'
					},
					{
						content: `设备[温室灯光${pageNo}]操作反馈`,
						detail: `模拟数据第${pageNo}页，灯光开启成功，亮度设置为80%`,
						mode: '自动',
						time: `2025-11-19 17:${5 + pageNo}:42`,
						operator: '王五'
					}
				]
				resolve(data)
			}, 800)
		})
	}

	// 初始加载
	fetchHistory(page).then(data => {
		historyList.value = data
	})

	// 下拉刷新
	function onRefresh() {
		refreshing.value = true
		page = 1
		fetchHistory(page).then(data => {
			historyList.value = data
			refreshing.value = false
			uni.showToast({
				title: '数据已刷新',
				icon: 'none'
			})
		})
	}

	// 上拉加载更多
	function loadMore() {
		if (loadingMore.value) return
		loadingMore.value = true
		page++
		fetchHistory(page).then(data => {
			if (data.length > 0) {
				historyList.value = historyList.value.concat(data)
				uni.showToast({
					title: `加载第${page}页数据`,
					icon: 'none'
				})
			}
			loadingMore.value = false
		})
	}
</script>

<style lang="scss" scoped>
	.history-content {
		// padding: 20rpx;
	}

	.item {
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.label {
			font-weight: bold;
			margin-right: 8rpx;
			color: #333;
		}

		.value {
			flex: 1;
			color: #555;
		}
	}

	.load-tip {
		text-align: center;
		padding: 20rpx;
		color: #888;
	}
</style>